<template>
  <t-dialog
    :visible="visible"
    width="60%"
    :header="title"
    :close-on-overlay-click="false"
    :footer="false"
    @update:visible="(val) => emit('update:visible', val)"
  >
    <t-tabs :default-value="activeTab">
      <t-tab-panel value="people" label="禁忌人群">
        <t-textarea v-model="confirmData.people" :placeholder="'请输入禁忌人群'" />
      </t-tab-panel>
      <t-tab-panel value="matters" label="禁忌事项">
        <t-textarea v-model="confirmData.matters" :placeholder="'请输入禁忌事项'" />
      </t-tab-panel>
    </t-tabs>
    <t-button @click="submit">保存</t-button>
  </t-dialog>
</template>

<script setup lang="ts">
import { MessagePlugin } from 'tdesign-vue-next';
import { computed, ref } from 'vue';

import { addOrUpdateTabooApi } from '@/api/medicinal';

defineOptions({
  name: 'Taboo',
});

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '添加禁忌',
  },
  contraindicated: {
    type: Object,
    default: () => ({
      medicinalId: null,
      taboo: {
        id: null,
        people: '',
        matters: '',
      },
    }),
  },
});

const emit = defineEmits(['update:visible', 'confirm']);

// 当前激活的标签
const activeTab = ref('people');

const confirmData = computed(() => {
  return props.contraindicated.taboo || {};
});

const submit = async () => {
  const { medicinalId } = props.contraindicated;
  const taboo = confirmData.value;
  await addOrUpdateTabooApi({
    medicinalId,
    id: taboo.id,
    people: taboo.people,
    matters: taboo.matters,
  });
  MessagePlugin.success('操作成功！');
  emit('update:visible', false);
  emit('confirm');
};
</script>

<style lang="less" scoped>
:deep(.t-tabs__content) {
  padding: 16px 0;
}

:deep(.t-table) {
  margin-top: 16px;

  .t-table__row-drag-handler {
    cursor: move;
  }
}
</style>
